<template>
	<!-- 根据sid 展示不同的组件内容 -->
	<view :style="{'height':initHeight+'px','overflow-y':'auto'}">
		<!-- 动态加载组件 -->
			<view v-else style='text-align: center;' v-if="option.sId === 'xmtzysTable' || option.sId === 'zxtzysTable' 
			|| option.sId === 'xmtzysNextTable' || option.sId === 'zxtzysNextTable' ">
				<image style="width: 350px; height: 350px;" mode="aspectFit" src="../../static/img/noComponent.png"></image>
			</view>
		<view id="component" v-else>
			<component :option='option' :is="apps" ref="commonComponents" />
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			option: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				apps: '',
				initHeight: ''
			}
		},
		created() {
			setTimeout(() => {
				if (this.option.sId === 'zcczTable' || this.option.sId === 'xmtzysTable') {
					// 动态加载组件
					// ${this.option.sId}
					this.apps = require(`@/components/allTables/${this.option.sId}/index.vue`).default
				}else {
						this.apps = require(`@/components/allTables/commonTable/index.vue`).default
				}
			}, 500)
			this.initHeight = document.body.clientHeight - 30
		},
		methods: {}
	}
</script>
<style>
</style>
